<template>
	<view class="search_page">
		<div class="search_box">
			<div class="search">
				<image class="icon" src="/static/search.png" mode=""></image>
				<input class="text" v-model="keyword" type="text" placeholder="搜索科普、资讯">
			</div>
			<div class="btn" @click='search'>搜索</div>
		</div>
		<!-- history -->
		<div class="history line">
			<div class="title">
				<div class="name">历史搜索</div>
				<div class="icon_box" @click='delHistory'>
					<image class="icon" src="/static/del.png" mode=""></image>
				</div>
			</div>
			<div class="list">
				<div class="item" @click='keywordSearch(item)' v-for="(item,index) in history" :key='index'>{{item}}</div>
			</div>
		</div>
		<!-- hot -->
		<div class="history">
			<div class="title">
				<div class="name">热门搜索</div>
			</div>
			<div class="list">
				<div class="item" @click='keywordSearch(item.name)' v-for="(item,index) in hots" :key="index">{{item.name}}</div>
			</div>
		</div>
	</view>
</template>

<script>
	import { getHot } from '@/network/api.js'
	export default {
		data() {
			return {
				keyword:'',
				history:[],
				hots:[],
			}
		},
		onLoad(){
			// #ifdef H5
			document.title = ' '
			// #endif
			this.getHotList()
			const hisList = uni.getStorageSync('history')
			let isEmpty = JSON.stringify(hisList) == "{}"
			console.log('isEmpty:',isEmpty)
			if(isEmpty){
				this.history = []
			}else{
				this.history = hisList || []
			}
		},
		methods: {
			navTo(path){uni.navigateTo({url: path});},
			search(){
				if(!this.keyword.trim()){
					uni.showToast({title: '请输入搜索内容',duration: 2000,icon:'none'});
				}else{
					this.history.push(this.keyword)
					const temp = [ ... new Set(this.history)]
					this.history = [ ... new Set(this.history)]
					uni.setStorageSync('history', temp);
					uni.navigateTo({url: `/pages/search_result/search_result?keyword=${this.keyword}`})
					this.keyword = ''
				}
			},
			delHistory(){
				this.history=[]
			},
			async getHotList(){
				const {data} = await getHot()
				console.log('data:',data)
				this.hots = data
			},
			keywordSearch(keyword){
				uni.navigateTo({url: `/pages/search_result/search_result?keyword=${keyword}`})
			},
		}
	}
</script>

<style lang="less">
.search_page{
	padding:10rpx 25rpx;
	.search_box{
		display: flex;
		align-items: center;
		margin-bottom: 70rpx;
		.search{
			height: 70rpx;
			background: #EEEEEE;
			border-radius: 35rpx;
			display: flex;
			align-items: center;
			flex:1;
			padding: 0 30rpx;
			.icon{
				width: 35rpx;
				height: 35rpx;
				margin-right: 10rpx;
			}
			.text{
				flex:1;
				font-size: 25rpx;
				font-weight: 400;
				color: #898989;
			}
		}
		.btn{
			width: 110rpx;
			height: 70rpx;
			background: linear-gradient(0deg, #0A7CC3, #139DF7);
			border-radius: 35rpx;
			flex-shrink: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			font-weight: 400;
			color: #FFFFFF;
			margin-left: 10rpx;
		}
	}
	.history{
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name{
				font-size: 28rpx;
				font-weight: 400;
				color: #616161;
			}
			.icon_box{
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.icon{
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			margin-top: 23rpx;
			.item{
				height: 65rpx;
				padding: 0 30rpx;
				background: #F5F5F5;
				border-radius: 10rpx;
				font-size: 25rpx;
				font-weight: 400;
				color: #545454;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0 15rpx 15rpx 0;
			}
		}
	}
	.line{
		border-bottom: 2rpx solid #F1F1F1;
	}
}
</style>
